<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 偏移列</title>
    <link rel="stylesheet" href="http://www.w3cschool.cn/statics/plugins/bootstrap/css/bootstrap.min.css">
    <script src="http://www.w3cschool.cn/statics/js/jquery-1.8.3.min.js"></script>
    <script src="http://www.w3cschool.cn/statics/plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing
                elit.
            </p>
        </div>
    </div>
</div>
</body>
</html>
结果如下所示：
网格系统偏移列

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 嵌套列</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-3" style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="col-md-9" style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Consectetur art party Tonx culpa semiotics. Pinterest
                        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p> sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>

        </div>

    </div>
</div>
</body>
</html>
结果如下所示：
网格系统嵌套列

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 列排序</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">
        <p>排序前</p>
        <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在右边
        </div>
    </div><br>
    <div class="row">
        <p>排序后</p>
        <div class="col-md-3 col-md-push-9"
             style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444,
         inset -1px 1px 1px #444;">
            我在左边
        </div>
        <div class="col-md-9 col-md-pull-3"
             style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444,
         inset -1px 1px 1px #444;">
            我在右边
        </div>
    </div>
</div>
</body>
</html>